<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>视频库</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="http://glorywebsdemo.com/themeforest/html/carveordering/images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/css/xcConfirm.css" />

<link rel="stylesheet" href="/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css/menu.css" />
<link href="/css/style2.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="/css/flexslider.css" type="text/css" media="screen" />

<style>
li {
	list-style-type: none;
}

.mydiv:hover {
	width: 250px;
	height: auto;
	border: #909090 1px solid;
	background: #fff;
	color: #333;
	filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,
		direction=120, strength=4);
	-moz-box-shadow: 2px 2px 10px #909090;
	-webkit-box-shadow: 2px 2px 10px #909090;
	box-shadow: 2px 2px 10px #909090;
}

a {
	cursor: pointer;
	text-decoration: none;
}

a:link, a:visited {
	text-decoration: none; /*超链接无下划线*/
}
</style>
</head>

<body>


	<!-- 修改框 -->
	<div class="modal fade" id="updateVideo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width: 50%; height: auto;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<img id="thumbnailUrl" style="width: 50px; height: 50px; float: left;border-radius: 50%;" />									
					<h4 class="modal-title" id="myModalLabel" style="float: left;position:relative; top: 12px;">视频修改</h4>		
				</div>
				<div class="modal-body" >
					<form id="videoUpdateAjaxForm" action="#" class="form-horizontal" role="form">

					<input type="hidden" name="videoId" id="videoId" class="form-control" placeholder="输入标题">

					<div class="form-group">
						<label for="firstname" class="col-sm-2 control-label">标题</label>
						<div class="col-sm-10">
							<input type="text" name="videoTitle" id="videoTitle" class="form-control" placeholder="输入标题">
						</div>
					</div>
					<div class="form-group">
						<label for="lastname" class="col-sm-2 control-label">简介</label>
						<div class="col-sm-10">
							<input type="text" name="videoInfo" id="videoInfo" class="form-control" placeholder="输入简介">
						</div>
					</div>

					<div class="form-group">
						<label for="lastname" class="col-lg-2 control-label">视频类型</label>
						<div class="col-lg-10">
							<select id="videoType" class="form-control" name="videoTypeId">
							</select>
						</div>
					</div>

					<div class="form-group">
						<div class="col-lg-offset-2 col-lg-10">
							<div class="checkbox">
								<label> <input type="checkbox" /> 本人确认已仔细阅读并充分理解<a href="https://www.vcg.com/help/privacy-policy"> 个人信息保护政策</a>与<a href="https://www.vcg.com/help/website-terms">
										网站使用条框</a> 的全部内容，同意接受上述协议的全部内容
								</label>
							</div>
						</div>
					</div>
				</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="updateButton">提交更改</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>



	<div class="container" style="padding: 0; margin-top: 0; background-color: EBEBEB;">
		<div class="container-fluid main-content" style="margin-bottom: 4px; padding: 0;">
			<div class="container-fluid row">

				<!--
                	作者：2539829814@qq.com
                	时间：2020-03-12
                	描述：网站头
                -->
				<div class="header">
					<div class="logo">
						<img th:src="${session.user.iconUrl}" style="float: left; padding: 5px; width: 45px; height: 45px; border-radius: 50%;" /> <a href="#" style="float: left;">
							<h1>视频中心</h1>
						</a>
					</div>
					<div class="search">
						<div class="search2">
							<form>
								<i class="fa fa-search"></i> <input type="text" value="Search for a movie" onFocus="this.value = '';"
									onBlur="if (this.value == '') {this.value = 'Search for a movie, play, event, sport or more';}" />
							</form>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>


				<!--
                	作者：2539829814@qq.com
                	时间：2020-03-12
                	描述：导航
                -->
				<div class="bootstrap_container">
					<nav class="navbar navbar-default w3_megamenu" role="navigation">
						<div class="navbar-header">
							<button type="button" data-toggle="collapse" data-target="#defaultmenu" class="navbar-toggle">
								<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
							</button>
							<a href="#" class="navbar-brand"><i class="fa fa-home"></i></a>

						</div>
						<!-- end navbar-header -->

						<div id="defaultmenu" class="navbar-collapse collapse">
							<ul class="nav navbar-nav">
								<li data-toggle="tab" class="active"><a id="videostoreButton" href="#">视频库</a></li>
								<li data-toggle="tab"><a id="videobankButton" href="#">素材库</a></li>
								<li data-toggle="tab"><a id="videoverifyButton" href="#">待审核</a></li>
								<li data-toggle="tab"><a id="videoverifyfalseButton" href="#">审核失败</a></li>

								<li data-toggle="tab"><a id="collectionButton" href="#">收藏</a></li>
								<li data-toggle="tab"><a id="recordButton" href="#">播放记录</a></li>


								<!-- 
							<li class="dropdown" data-toggle="tab">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">库管理 <span class="caret"></span></a>
								<ul id="videooperateButton" class="dropdown-menu mytab" role="menu" aria-labelledby="dropdownMenu">
									<li>
										<a  data-toggle="tab" href="#">视频上架</a>
									</li>
									<li>
										<a id="userInfoUpdateButton" href="#">视频下架</a>
									</li>
									<li>
										<a id="userInfoUpdateButton" href="#">视频删除</a>
									</li>
								</ul>
							</li> -->

							</ul>

							<ul class="nav navbar-nav navbar-right">
								<li class="dropdown" data-toggle="tab"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span
										title="设置" class="glyphicon glyphicon-cog"></span></a>
									<ul class="dropdown-menu mytab">
										<li data-toggle="tab" class="dropdown-header">设置中心</li>
										<li data-toggle="tab"><a id="reload" href="#">页面刷新</a></li>
										<li data-toggle="tab"><a href="#">安全退出</a></li>
										<li data-toggle="tab"><a href="#">账号注销</a></li>
									</ul></li>
							</ul>
						</div>
						<!--/.nav-collapse -->
		
				<!--/.container-fluid -->
				</nav>
		</div>
				<div class="container" style="border: rgba(0, 0, 0, .125) solid 1px;">


					<!--
                	作者：2539829814@qq.com
                	时间：2020-02-06
                	描述：用于显示视频库
                -->
					<div class="container row p_card" id="videostore"></div>

					<!--
                	作者：2539829814@qq.com
                	时间：2020-02-06
                	描述：用于显示素材库
                -->
					<div class="container row p_card" id="videobank"></div>

					<!--
                	作者：2539829814@qq.com
                	时间：2020-02-06
                	描述：用于显示待审核
                -->
					<div class="container row p_card" id="videoverify"></div>


					<!--
                	作者：2539829814@qq.com
                	时间：2020-02-06
                	描述：用于显示审核失败
                -->
					<div class="container row p_card" id="videoverifyfalse"></div>

					<!--
                	作者：2539829814@qq.com
                	时间：2020-02-06
                	描述：用于显示收藏
                -->
					<div class="container row p_card" id="collection">
						<h1>无收藏视频</h1>
					</div>


					<!--
                	作者：2539829814@qq.com
                	时间：2020-02-06
                	描述：用于显示观看记录
                -->
					<div class="container row p_card" id="record"></div>


				</div>

			</div>



			<script src="/js/jquery.min.js"></script>
			<!-- include flowplayer -->
			<script src="/js/flowplayer.min.js"></script>

			<script src="/js/bootstrap.min.js"></script>


			<script src="/js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>


			<script src="/js/common.js" type="text/javascript"></script>
			<script src="/js/home.js"></script>
			<script type="text/javascript">
				$('#reload').click(function() {
					window.location.reload();
				});

				var videostore_signal = false;
				var videobank_signal = false;
				var videoverify_signal = false;
				var videooperate_signal = false;
				var videoverifyfalse_signal = false;
				var videoType_signal = false;
				var collection_signal = false;
				var record_signal = false;

				function operateAjax(url, videoId) {
					$.ajax({
						url : url,
						async : true,
						type : "post",
						data : {
							"videoId" : videoId
						},
						dataType : "JSON",
						error : function() {
							window.wxc.xcConfirm("操作失败", window.wxc.xcConfirm.typeEnum.error);
						},
						success : function(data) {
							window.wxc.xcConfirm("操作成功", window.wxc.xcConfirm.typeEnum.success);
						}
					});
				}

				function myAjax(url, idName, id_identify_prefix, type) {
					$.ajax({
						url : url,
						async : true,
						type : "get",
						dataType : "JSON",
						error : function() {
							window.wxc.xcConfirm("操作失败", window.wxc.xcConfirm.typeEnum.success);
						},
						success : function(data) {
							$.each(data.data, function(i, val) {
								var div1 = $('<div id="videoId'+id_identify_prefix+val.videoId+'" style="margin-bottom:40px;" class="col-lg-3 "/>');

								var ul = $('<ul style="padding:0;margin:0;"/>');
								ul.appendTo(div1);
								var li = $('<li style="margin:0;"/>');
								li.appendTo(ul);

								var div2 = $('<div class="card mydiv" style="width:100%; border: rgba(0,0,0,.125) solid 1px ;"/>');
								div2.appendTo(li);

								var div21 = $('<div class="C_img" style="width:100%;"/>');
								div21.appendTo(div2);

								var img = $('<img style="width:100%;" class="absoImg" alt=""/>');
								img.appendTo(div21);
								img.attr("src", this.thumbnailUrl);

								var div22 = $('<div class="container-fluid" style="padding:2px 5px;"/>');
								div22.appendTo(div2);

								var h4 = $('<h4 class="title" style="font-weight:bold;margin:3px;"/>');
								h4.appendTo(div22);
								h4.html(this.videoTitle);

								var p = $('<p class="desc"/>');
								p.appendTo(div22);
								p.html("简述：" + this.videoInfo.substring(0, 10) + "...");

								var div221 = $('<div class="containe-fluidr" style="padding:8px 0 ;"/>');
								div221.appendTo(div22);

								var div2211 = $('<div class="" style="float:left;"/>');
								div2211.appendTo(div221);
								div2211.html("状态：" + this.videoState.stateName);

								var div2212 = $('<div class="dropup " style="float:right; border: rgba(0,0,0,.125) solid 1px;margin:0 0 4px 0;">');
								div2212.appendTo(div221);

								var button = $(' <a  class="dropdown-toggle" data-toggle="dropdown" />');
								button.appendTo(div2212);
								button.html('<div style="margin:4px 0;padding:2px 10px;cursor: pointer;text-decoration: none;">operate</div>');

								//操作下拉框
								var ul1 = $(' <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"/>');
								ul1.appendTo(div2212);

								//上架
								var li12 = $('<li role="presentation"/>');
								var a2 = $('<a role="menuitem" tabindex="-1" />');

								//下架
								var li11 = $('<li role="presentation"/>');
								var a1 = $('<a role="menuitem" tabindex="-1" />');

								//修改
								var li13 = $('<li role="presentation"/>');
								var a3 = $('<a role="menuitem" tabindex="-1" data-toggle="modal" data-target="#updateVideo"/>');

								//删除视频
								var li14 = $('<li role="presentation"/>');
								var a4 = $('<a role="menuitem" tabindex="-1" />');

								//再审
								var li15 = $('<li role="presentation"/>');
								var a5 = $('<a role="menuitem" tabindex="-1" />');

								//删除收藏
								var li16 = $('<li role="presentation"/>');
								var a6 = $('<a role="menuitem" tabindex="-1" />');

								//删除记录
								var li17 = $('<li role="presentation"/>');
								var a7 = $('<a role="menuitem" tabindex="-1" />');

								if (this.videoState.stateName == "上架中" && type == null) {

									li12.appendTo(ul1);

									a2.html("下架");
									a2.appendTo(li12);

								} else if ((this.videoState.stateName == "已下架" || this.videoState.stateName == "已认证") && type == null) {

									li11.appendTo(ul1);

									a1.html("上架");
									a1.appendTo(li11);

									li13.appendTo(ul1);

									a3.html("修改");
									a3.appendTo(li13);

									li14.appendTo(ul1);

									a4.html("删除");
									a4.appendTo(li14);
								} else if (this.videoState.stateName == "认证中" && type == null) {

									li13.appendTo(ul1);

									a3.html("修改");
									a3.appendTo(li13);

									li14.appendTo(ul1);

									a4.html("删除");
									a4.appendTo(li14);
								} else if (this.videoState.stateName == "认证失败" && type == null) {

									li14.appendTo(ul1);

									a4.html('删除');
									a4.appendTo(li14);

									li15.appendTo(ul1);
									a5.html('再审');
									a5.appendTo(li15);
								} else if (type == "collection") {

									var date = (new Date(this.editDate)).Format("yyyy-MM-dd hh:mm:ss");
									div2211.html("日期：" + date);
									li16.appendTo(ul1);

									a6.html("删除收藏");
									a6.appendTo(li16);
								} else if (type == "record") {
									var date = (new Date(this.editDate)).Format("yyyy-MM-dd hh:mm:ss");
									div2211.html("日期：" + date);
									li17.appendTo(ul1);

									a7.html("删除记录");
									a7.appendTo(li17);
								} else {
									//window.wxc.xcConfirm("添加操作失败", window.wxc.xcConfirm.typeEnum.error);
								}

								//$(idName).after(div1);
								div1.appendTo(idName);
								a1.click(function(div1) {
									//alert("上架"+val.videoId);
									videostore_signal = false;
									var id = '#videoId' + id_identify_prefix + val.videoId;
									$(id).remove();
									operateAjax("/VideoController/upStoreByAjax", val.videoId);
								});
								a2.click(function() {
									//alert("下架"+val.videoId);
									videobank_signal = false;
									var id = '#videoId' + id_identify_prefix + val.videoId;
									$(id).remove();
									operateAjax("/VideoController/downStoreByAjax", val.videoId);
								});

								a3.click(function() {
									//alert("修改"+val.videoId);
									$('#updatevideoPage').show();

									$.ajax({
										url : "/VideoController/getVideoByAjax?videoId=" + val.videoId,
										async : true,
										type : "post",
										dataType : "JSON",
										error : function() {
											window.wxc.xcConfirm("失败", window.wxc.xcConfirm.typeEnum.error);
										},
										success : function(data) {

											$("#thumbnailUrl").attr("src", data.thumbnailUrl);
											$('#videoTitle').attr("value", data.videoTitle);
											$('#videoInfo').attr("value", data.videoInfo);
											$('#videoId').attr("value", data.videoId);

											if (videoType_signal != true) {
												$.ajax({
													url : "/VideoTypeController/getAllVideoTypeByAjax",
													async : true,
													type : "post",
													dataType : "JSON",
													error : function() {
														window.wxc.xcConfirm("失败", window.wxc.xcConfirm.typeEnum.error);
													},
													success : function(data1) {
														$.each(data1, function(i, val) {
															var option = $('<option/>');
															if (data.videoType.videoTypeId == val.videoTypeId) {
																option.attr("selected", "selected");
															}
															var p = $('<p/>');
															p.appendTo(option);
															option.attr("value", val.videoTypeId);
															p.html(val.typeName);
															option.appendTo('#videoType');
														});
													}
												});
												videoType_signal = true;
											}
										}
									})

									// window.open("/VideoController/videoPlay?videoId="+val.videoId);
								});
								a4.click(function(div1) {
									//alert("删除"+val.videoId);
									var id = '#videoId' + id_identify_prefix + val.videoId;
									$(id).remove();

									operateAjax("/VideoController/deleteVideoByAjax", val.videoId);
								});
								
								a5.click(function(){
									var id = '#videoId' + id_identify_prefix + val.videoId;
									$(id).remove();
									operateAjax("/VideoController/reVerifyVideo", val.videoId);
								});

								a6.click(function(div1) {
									//alert("删除"+val.videoId);
									var id = '#videoId' + id_identify_prefix + val.videoId;
									$(id).remove();
									operateAjax("/CollectionController/removeCollectionByAjax", val.videoId);

								});

								a7.click(function(div1) {
									//alert("删除"+val.videoId);
									var id = '#videoId' + id_identify_prefix + val.videoId;
									$(id).remove();
									operateAjax("/RecordController/removeRecordByAjax", val.videoId);
								});

								img.click(function() {
									window.open("/VideoController/videoPlay?videoId=" + val.videoId);
								});
							});
						}
					})
				}

				$("#updateButton").click(function() {
					$.ajax({
						type : "post",
						url : "/VideoController/updateVideoByAjax",
						async : true,
						data : $('#videoUpdateAjaxForm').serialize(),
						dataType : "JSON",
						error : function(data) {
							window.wxc.xcConfirm("上传失败", window.wxc.xcConfirm.typeEnum.error);
						},
						success : function(result) {
							window.wxc.xcConfirm(result, window.wxc.xcConfirm.typeEnum.success);
						}//success:function
					});//ajax

				}

				);

				$(document).ready(function() {
					$("#videostore").show();
					$("#videobank").hide();
					$("#videoverify").hide();
					$("#videoverifyfalse").hide();
					$('#updatevideoPage').hide();
					$('#collection').hide();
					$('#record').hide();
					myAjax("/VideoController/enableVideoListByAjax", "#videostore", "videostore", null);
					videostore_signal = true;
				});
				$("#videostoreButton").click(function() {
					$("#videostore").show();
					$("#videobank").hide();
					$("#videoverify").hide();
					$("#videoverifyfalse").hide();
					$('#updatevideoPage').hide();
					$('#collection').hide();
					$('#record').hide();
					if (videostore_signal != true) {
						$('#videostore').empty();
						myAjax("/VideoController/enableVideoListByAjax", "#videostore", "videostore", null);
						videostore_signal = true;
					}
				});
				$("#videobankButton").click(function() {
					$("#videobank").show();
					$("#videostore").hide();
					$("#videoverify").hide();
					$("#videoverifyfalse").hide();
					$('#updatevideoPage').hide();
					$('#collection').hide();
					$('#record').hide();
					if (videobank_signal != true) {
						$("#videobank").empty();
						myAjax("/VideoController/disableVideoListByAjax", "#videobank", "videobank", null);
						videobank_signal = true;
					}
				});
				$("#videoverifyButton").click(function() {
					$("#videoverify").show();
					$("#videostore").hide();
					$("#videobank").hide();
					$("#videoverifyfalse").hide();
					$('#updatevideoPage').hide();
					$('#collection').hide();
					$('#record').hide();
					if (videoverify_signal != true) {
						$('#videoverify').empty();
						myAjax("/VideoController/verifyingVideoListByAjax", "#videoverify", "videoverify", null);
						videoverify_signal = true;
					}
				});

				$("#videoverifyfalseButton").click(function() {
					$("#videoverifyfalse").show();
					$("#videoverify").hide();
					$("#videostore").hide();
					$("#videobank").hide();
					$('#updatevideoPage').hide();
					$('#collection').hide();
					$('#record').hide();
					if (videoverifyfalse_signal != true) {
						$('#videoverifyfalse').empty();
						myAjax("/VideoController/verifyFalseVideoListByAjax", "#videoverifyfalse", "videoverifyfalse", null);
						videoverifyfalse_signal = true;
					}
				});

				$("#collectionButton").click(function() {
					$("#collection").show();
					$("#videoverify").hide();
					$("#videostore").hide();
					$("#videobank").hide();
					$('#updatevideoPage').hide();
					$('#videoverifyfalse').hide();
					$('#record').hide();
					if (collection_signal != true) {
						$('#collection').empty();
						myAjax("/CollectionController/getAllCollectionByAjax", "#collection", "collection", "collection");
						collection_signal = true;
					}
				});

				$("#recordButton").click(function() {
					$("#record").show();
					$("#videoverify").hide();
					$("#videostore").hide();
					$("#videobank").hide();
					$('#updatevideoPage').hide();
					$('#collection').hide();
					$('#videoverifyfalse').hide();
					if (record_signal != true) {
						$('#record').empty();
						myAjax("/RecordController/getAllRecordByAjax", "#record", "record", "record");
						record_signal = true;
					}
				});

				$('#reset').click(function() {
					$('#updatevideoPage').hide();
				});
			</script>
</body>

</html>